<template>
  <su-swiper
    :list="imgList"
    :dotStyle="data.indicator === 'dot' ? 'long' : 'tag'"
    imageMode="scaleToFill"
    dotCur="bg-mask-40"
    :seizeHeight="300"
    :autoplay="data.autoplay"
    :interval="data.interval * 1000"
    :mode="data.type"
  />
</template>

<script setup lang="ts">
import { computed } from 'vue';
import sheep from '@/sheep';

// 定义属性
const props = defineProps({
  data: {
    type: Object as () => ({
      indicator: string;
      autoplay: boolean;
      interval: number;
      type: string;
      items: {
        type: string;
        imgUrl: string;
        videoUrl: string;
      }[];
    }),
    default: () => ({}),
  },
});

// 计算图片列表
const imgList = computed(() =>
  props.data.items.map(item => ({
    ...item,
    type: item.type === 'img' ? 'image' : 'video',
    src: sheep.$url.cdn(item.type === 'img' ? item.imgUrl : item.videoUrl),
    poster: sheep.$url.cdn(item.imgUrl),
  }))
);
</script>

<style scoped>
/* Add your styles here */
</style>
